<template>
	<div class="gongzuotai">
		<div class="gongzuotai1">
			<div class="gongzuotai1_1">
				<div class="gongzuoshang">
					<img src="../../../assets/img/zuotai1.png" />
				</div>
				<div class="gongzuoxia">
					<p>找达人</p>
					<p>热门达人智能搜索</p>
				</div>
			</div>
			<div class="gongzuotai1_1">
				<div class="gongzuoshang">
					<img src="../../../assets/img/zuotai2.png" />
				</div>
				<div class="gongzuoxia">
					<p>找创意</p>
					<p>热门创意实时追踪</p>
				</div>
			</div>
			<div class="gongzuotai1_1">
				<div class="gongzuoshang">
					<img src="../../../assets/img/zuotai3.png" />
				</div>
				<div class="gongzuoxia">
					<p>找商品</p>
					<p>热门商品实时追踪</p>
				</div>
			</div>
			<div class="gongzuotai1_1">
				<div class="gongzuoshang">
					<img src="../../../assets/img/zuotai4.png" />
				</div>
				<div class="gongzuoxia">
					<p>视频监测</p>
					<p>实时跟踪视频数据</p>
				</div>
			</div>
		</div>
		
		<div class="pingtaihao">
			<div class="pingtaihao1">
				<div class="pingtaihao1_1">
					<span>我的{{$store.state.pintaiName}}号</span>
				</div>
				<div class="pingtaihao1_2">
					<span>更多</span>
				</div>
			</div>
			<div class="pingtaihao2">
				<div class="gonzuo_shangchuan">
					+
				</div>
			</div>
		</div>
		
		<div class="gongzuo_shipin">
			<div class="gongzuo_shipin1">
				<div class="shupin_tai">
					<div class="shipin_gong1">
						<span>我的{{$store.state.pintaiName}}号—最新视频</span>
					</div>
					<div class="shipin_gong2">
						<span>最新</span>
						<span>最热</span>
					</div>
				</div>
				
				<div class="shipin_tai1">
					<img src="../../../assets/img/404.png" />
					<span>暂无数据</span>
				</div>
			</div>
			<div class="gongzuo_shipin2">
				<div class="shuju_renzi1">
					<div class="shuju_renzi2">
						<span>文章资讯</span>
					</div>
					<div class="shuju_renzi3">
						<span>查看全部</span>
					</div>
				</div>
				
				<div class="remenzixun">
					<ul>
						<li v-for="(item,index) in 6" :key="index">
							<span>
								8月没拍MCN达人榜单|深加联合8月没拍MCN达人榜单|深加联合
							</span>
							<span>
								发布日期：2020-10-27
							</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="gongzuo_botton">
			<div class="zuobotton1">
				<div class="zuobotton1_1" v-for="(item,index) in 2" :key="index">
					<p>2020-08-10【更新】话题检测上线</p>
					<p>可通过输入话题链接创建话题监测任务,实时跟踪话题数据变化；</p>
				</div>
			</div>
			<div class="zuobotton2">
				<ul>
					<li  v-for="(item,index) in 5" :key="index">
						<span>
							搜索不到达人怎么办？搜索不到
						</span>
					</li>
				</ul>
			</div>
			<div class="zuobotton3">
				<div class="gong_erwei">
					<img src="../../../assets/img/kefu.png" />
					<span>
						客服
					</span>
				</div>
				<div class="gong_erwei">
					<img src="../../../assets/img/kefu.png" />
					<span>
						带货参谋小程序
					</span>
				</div>
				<div class="gong_erwei">
					<img src="../../../assets/img/kefu.png" />
					<span>
						订阅号
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"gongzuotai",
		data(){
			return{
				
			}
		},
		created(){
			
		},
		//每次进入该页面都会至执行的函数
		activated(){
			this.zhiding();
		},
		//当该页面被销毁的时候执行的函数
		deactivated(){
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		},
		methods:{
			zhiding(){
				// 让页面回到顶部---效果(滚动动画回到顶部)
				let top = document.documentElement.scrollTop || document.body.scrollTop
				// 实现滚动效果 
				let timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50
					if (top <= 0) {
					  clearInterval(timeTop)
					}
				}, 10)
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.gongzuotai{
		
		@keyframes shake-bottom {
		  0%,
		  100% {
		    transform: rotate(0deg);
		    transform-origin: 50% 100%;
		  }
		  10% {
		    transform: rotate(2deg);
		  }
		  20%,
		  40%,
		  60% {
		    transform: rotate(-4deg);
		  }
		  30%,
		  50%,
		  70% {
		    transform: rotate(4deg);
		  }
		  80% {
		    transform: rotate(-2deg);
		  }
		  90% {
		    transform: rotate(2deg);
		  }
		}

		
		.gongzuotai1{
			background-color: #fff;
			box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
			border-radius:0.1rem ;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.8rem 0.8rem;
			
			.gongzuotai1_1{
				cursor: pointer;
				border: 1px solid rgba(0,0,0,0.2);
				border-radius:0.1rem ;
				padding: 1rem 1.5rem;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.gongzuoshang{
					padding: 0.5rem;
					img{
						width: 1.1rem;
					}
				}
				.gongzuoxia{	
					p:nth-of-type(1){
						font-size: 0.6rem;
						color: #333;
						margin-top:-0.4rem ;
					}
					p:nth-of-type(2){
						color: #999999;
						font-size: 0.4rem;
						margin-top: 0.3rem;
					}
				}
			}
			.gongzuotai1_1:hover{
				animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
			}
		}
		
		@keyframes jello-diagonal-2 {
		  0% {
		    transform: skew(0deg 0deg);
		  }
		  30% {
		    transform: skew(5deg -5deg);
		  }
		  40% {
		    transform: skew(-5deg, 5deg);
		  }
		  50% {
		    transform: skew(5deg, -5deg);
		  }
		  65% {
		    transform: skew(-5deg, 5deg);
		  }
		  75% {
		    transform: skew(5deg, -5deg);
		  }
		  85%{
			  transform: skew(-5deg, 5deg);
		  }
		  100% {
		    transform: skew(0deg 0deg);
		  }
		}

		
		.pingtaihao{
			box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
			border-radius:0.1rem ;
			margin-top:1rem ;
			padding: 0.4rem 0.8rem;
			background-color: #fff;
			
			.pingtaihao1{
				.pingtaihao1_1{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					
					span{
						font-size: 0.45rem;
						display: inline-block;
						margin-left:0.8rem ;
						color: #333333;
						letter-spacing: 0.05rem;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.4rem;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #0091FF;
					}
				}
				
				.pingtaihao1_2{
					float: right;
					height: 100%;
					box-sizing: border-box;
					width: 3rem;
					position: relative;
					cursor: pointer;
					
					span{
						font-size: 0.4rem;
						color: #0091FF;
						float: left;
						margin-left:1.2rem ;
						margin-top:0.5rem;
					}
					span::after{
						content: "";
						display: block;
						width: 0.3rem;
						height: 0.3rem;
						border-top:1px solid #0091FF ;
						border-right: 1px solid #0091FF;
						transform: rotate(45deg);
						display: inline-block;
						position: absolute;
						top: 0.6rem;
						right: 0.5rem;
					}
				}
			}
			.pingtaihao1::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.pingtaihao2{
				margin-top:0.8rem ;
				margin-bottom:0.5rem ;
				
				.gonzuo_shangchuan{
					cursor: pointer;
					border-radius:0.1rem ;
					box-shadow: 0 0 0.2rem rgba(0,0,0,0.2);
					width: 24%;
					height: 5rem;
					font-size: 4rem;
					text-align: center;
					line-height: 4.2rem;
					color: rgba(0,0,0,0.1);
				}
				.gonzuo_shangchuan:hover{
					animation: jello-diagonal-2 0.8s both;
				}
			}
			
		}
		
		.gongzuo_shipin{
			margin-top:1rem ;
			padding: 0 0;
			
			.gongzuo_shipin1{
				box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
				border-radius:0.1rem ;
				padding-top:0.4rem ;
				padding-left:0.8rem ;
				float: left;
				width: 59%;
				background-color: #fff;
				
				.shupin_tai{
					.shipin_gong1{
						height: 100%;
						box-sizing: border-box;
						float: left;
						position: relative;
						
						span{
							font-size: 0.45rem;
							display: inline-block;
							margin-left:0.8rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					.shipin_gong2{
						float: right;
						font-size: 0.4rem;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top:0.5rem ;
						margin-right:3rem ;
						
						span{
							display: block;
							padding:0.1rem 0.3rem;
							cursor: pointer;
						}
						span:nth-of-type(1){
							border-top-left-radius:0.05rem ;
							border-bottom-left-radius:0.05rem ;
							border: 1px solid #0091FF;
							color: #fff;
							background-color: #0091FF;
						}
						span:nth-of-type(2){
							border-top-right-radius:0.05rem ;
							border-bottom-right-radius:0.05rem ;
							border: 1px solid #DCDCDC;
							color: #0091FF;
						}
					}
				}
				.shupin_tai::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.shipin_tai1{
					margin-top:0.5rem ;
					padding: 4.64rem 0;
					text-align: center;
					
					img{
						width: 6rem;
					}
					
					span:nth-of-type(1){
						font-size: 0.6rem;
						color: #B3B3B3;
						display: block;
						margin: 0.4rem 0;
					}
				}
			}
			.gongzuo_shipin1::after{
				content: "";
				display: block;
				clear: both;
			}
			.gongzuo_shipin2{
				box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
				border-radius:0.1rem ;
				padding-top:0.4rem ;
				background-color: #fff;
				width: 36%;
				float: right;
				
				.shuju_renzi1{
					height: 100%;
					box-sizing: border-box;
					position: relative;
					border-bottom:1px solid #E7E7E7 ;
					padding:0 0.9rem ;
					padding-bottom:0.6rem ;
					
					.shuju_renzi2{
						height: 100%;
						box-sizing: border-box;
						float: left;
						position: relative;
						
						span{
							font-size: 0.45rem;
							display: inline-block;
							margin-left:0.8rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					
					.shuju_renzi3{
						float: right;
						height: 100%;
						box-sizing: border-box;
						width: 3rem;
						position: relative;
						cursor: pointer;
						
						span{
							font-size: 0.4rem;
							color: #0091FF;
							float: left;
							margin-left:0.5rem ;
							margin-top:0.5rem;
						}
						span::after{
							content: "";
							display: block;
							width: 0.3rem;
							height: 0.3rem;
							border-top:1px solid #0091FF ;
							border-right: 1px solid #0091FF;
							transform: rotate(45deg);
							display: inline-block;
							position: absolute;
							top: 0.6rem;
							right: 0.5rem;
						}
					}
				}
				.shuju_renzi1::after{
					content: "";
					display: block;
					clear: both;
				}
				.remenzixun{
					border-bottom:1px solid #F2F2F2 ;
					margin-top:0.3rem ;
					position: relative;
					
					ul{
						list-style: none;
						li{
							position: relative;
							cursor: pointer;
							padding: 0.4rem 2rem 0.4rem 1rem;
							border-bottom:1px solid #E7E7E7 ;
							
							
							span:nth-of-type(1){
								display: block;
								color: #333333;
								font-size: 0.4rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							span:nth-of-type(2){
								display: block;
								color: #CFCFCF;
								font-size: 0.35rem;
								margin-top:0.3rem ;
							}
						}
						li:hover span{
							color: #1890FF;
						}
					}
				}
			}
		}
		.gongzuo_shipin::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.gongzuo_botton{
			margin-top:1rem ;
			
			.zuobotton1{
				float: left;
				width: 31.5%;
				height: 5.4rem;
				box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
				border-radius:0.1rem ;
				background-color: #fff;
				cursor: pointer;
				
				.zuobotton1_1{
					padding: 0.6rem;
					color: #333;
					font-size: 0.4rem;
					border-bottom:1px solid #EAEAEA ;
					
					p:nth-of-type(2){
						margin-top:0.5rem ;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
				}
				.zuobotton1_1:hover p:nth-of-type(2){
						color: #0091FF;
					}
			}
			.zuobotton2{
				float: left;
				height: 5.4rem;
				width: 31.5%;
				margin-left:2.54% ;
				padding: 0.3rem 0.6rem;
				box-sizing: border-box;
				background-color: #fff;
					
				ul{
					line-height: 1rem;
					list-style: none;
					li{
						color: #333;
						cursor: pointer;
						position: relative;
						font-size: 0.4rem;
						padding-left:0.5rem ;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.2rem;
							height: 0.2rem;
							background-color: #0091FF;
							border-radius:50% ;
						}
						
						span:hover{
							color: #0091FF;
						}
					}
				}
			}
			.zuobotton3{
				height: 3.65rem;
				float: left;
				width: 31.5%;
				margin-left:2.54% ;
				align-items: center;
				display: flex;
				justify-content: space-around;
				background-color: #fff;
				padding: 0.9rem 0;
				
				.gong_erwei{
					text-align: center;
					img{
						width: 2.4rem;
					}
					span{
						display: block;
						margin: 0.2rem 0;
						color: #333;
						font-size: 0.4rem;
					}
				}
			}
			
		}
		.gongzuo_botton::after{
			content: "";
			display: block;
			clear: both;
		}
	}
</style>
